<template>
  <msui-datagrid :options="options">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'projectCode'">
        <a> {{ record.projectCode }} </a>
      </template>
    </template>
    <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, column }">
      <div style="padding: 8px">
        <a-input
          ref="searchInput"
          :placeholder="`请输入 ${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; display: block"
          @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
      </div>
    </template>
    <template #customFilterIcon="{ filtered }">
      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
    </template>
  </msui-datagrid>
</template>
<script setup>
import { SearchOutlined } from '@ant-design/icons-vue'
import { MsuiDatagridModel } from 'msui'
let options = new MsuiDatagridModel({
  projectCode: '项目编号',
  projectName: '项目名称',
  projectYear: '立项年度',
  projectType: '项目类型',
  area: '建设面积（亩）',
  projectTotalCapital: '项目总资金（万元）',
  sectionCount: '标段数量（个）',
  status: '项目状态',
  createAt: '创建日期'
})
options.setData([
  {
    projectCode: '1',
    projectName: '11',
    projectYear: '23',
    projectType: '11',
    area: '1',
    projectTotalCapital: '1',
    sectionCount: '2',
    status: '2',
    createAt: '4'
  },
  {
    projectCode: '项目编号',
    projectName: '项目名称项目名称项目名称项目名称项目名称',
    projectYear: '立项年度',
    projectType: '项目类型',
    area: '建设面积（亩）',
    projectTotalCapital: '项目总资金（万元）',
    sectionCount: '标段数量（个）',
    status: '项目状态',
    createAt: '创建日期'
  }
])
options.projectCode.setBind({
  customFilterDropdown: true
})
options.projectName.setBind({
  customFilterDropdown: true,
  resizable: true,
  minWidth: 100,
  width: 300,
  maxWidth: 400,
  ellipsis: {
    showTitle: true
  }
})
options.setBind({
  customRow: (record) => {
    return {
      onClick: (event) => {
        console.log(event, record)
      }
    }
  },
  locale: {
    emptyText: '暂无数据'
  },
  bordered: true,
  stripe: true,
  sticky: true,
  size: 'middle',
  pagination: {
    defaultPageSize: 40,
    hideOnSinglePage: false
  }
})
</script>
